<template>
  <view class="box">
    <view class="flex-center row posr" style="font-size: 34rpx">
      <view class="bold">{{ title }}</view>
      <view v-if="curType === 'info'" class="posa unbind-btn" @click="openConfirm">解绑</view>
    </view>
    <template v-if="curType !== 'info'">
      <view class="row row-grid">
        <view class="talj lbl">持卡人</view>
        <input
          :value="person"
          type="text"
          placeholder="请输入持卡人姓名"
          placeholder-style="color: #999;"
          @input="onChineseInput($event, 'person')"
        />
      </view>
      <view class="row row-grid">
        <view class="talj lbl">银行</view>
        <input
          :value="bankName"
          maxlength="25"
          placeholder="请输入银行名称"
          placeholder-style="color: #999;"
          @input="onChineseInput($event, 'bankName')"
        />
      </view>
      <view class="row row-grid">
        <view class="talj lbl">开户行</view>
        <input
          :value="bank"
          maxlength="40"
          placeholder="请输入开户行"
          placeholder-style="color: #999;"
          @input="onChineseInput($event, 'bank')"
        />
      </view>
      <view class="row row-grid">
        <view class="talj lbl">银行卡号</view>
        <input
          :value="cardNum"
          type="number"
          placeholder="请输入银行卡号"
          placeholder-style="color: #999;"
          maxlength="19"
          @input="onNumberInput"
        />
      </view>
    </template>
    <template v-else>
      <view class="flex-jcsb flex-vcenter row row-info">
        <view class="lbl">银行卡</view>
        <view @click="showChangingPad">
          <text style="margin-right: 12rpx">{{ cardInfo }}</text>
          <uni-icons type="right" color="#999" size="14"></uni-icons>
        </view>
      </view>
    </template>
    <ConfirmBtns :has-cancel="curType !== 'info'" @cancel="emit('close')" @confirm="confirm" />
  </view>
  <view v-show="isShowConfirmBox" class="mask-box">
    <view class="inner-mask">
      <Confirm ref="confirmPopup" title="是否解绑银行卡" @cancel="closeConfirm" @confirm="unbind" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { getDriverID } from '@/stores/driverID';
import { useFinanceStore } from '@/stores/finance';
import { useUserStore } from '@/stores/user';
import { errorToast, showLoading, showToast, successToast } from '@/utils/prompt';
import Confirm from '@c/common/Confirm.vue';
import ConfirmBtns from '@c/common/ConfirmBtns.vue';
import { toPublish } from '@mqtt';
import { computed, nextTick, ref } from 'vue';

const props = defineProps({
  type: {
    type: String,
    required: true,
  },
});
const repeat = ref(true); //放重复点击
// static
const driver_id = getDriverID();
const userInfo = useUserStore();
const realname = computed(() => userInfo.realname);
const financeStore = useFinanceStore();
const hasBank = computed(() => financeStore.bankID !== '');
const person = hasBank.value ? ref(financeStore.real_name) : ref('');
const bankName = hasBank.value ? ref(financeStore.bank_name) : ref('');
const bank = hasBank.value ? ref(financeStore.bank_info) : ref('');
const cardNum = hasBank.value ? ref(financeStore.card_no) : ref('');
const cardInfo = computed(() => {
  if (hasBank.value) {
    const { bank_name, card_no } = financeStore;
    return `${bank_name}(${card_no.substring(card_no.length - 4)})`;
  } else {
    return '';
  }
});
// data
const isToChange = ref(false);
const curType = computed(() => {
  if (isToChange.value) {
    return 'change';
  } else {
    return props.type;
  }
});
const title = computed(() => {
  switch (curType.value) {
    case 'info':
      return '银行卡';
    case 'bind':
      return '绑定银行卡';
    case 'change':
      return '更换银行卡';
  }
});
const isShowConfirmBox = ref(false);
// refs
const confirmPopup = ref(null);

const emit = defineEmits(['close']);

function showChangingPad() {
  isToChange.value = true;
}

function onChineseInput(evt: any, type: string) {
  const { detail } = evt;
  const rule = /[^\u4E00-\u9FA5]/g; // 匹配非中文字符
  const value = detail.value.replace(rule, '');
  nextTick(() => {
    switch (type) {
      case 'person':
        person.value = value;
        break;
      case 'bankName':
        bankName.value = value;
        break;
      case 'bank':
        bank.value = value;
        break;
      case 'cardNum':
        cardNum.value = value;
        break;
    }
  });
}

function onNumberInput(evt: any) {
  const { detail } = evt;
  const rule = /[^\d]/g;
  const value = detail.value.replace(rule, '');
  nextTick(() => {
    cardNum.value = value;
  });
}

function openConfirm() {
  isShowConfirmBox.value = true;
  confirmPopup.value.open();
}
function closeConfirm() {
  confirmPopup.value.close();
  isShowConfirmBox.value = false;
}
function unbind() {
  showLoading('解绑中...');
  const payload = {
    driver_id,
    id: financeStore.bankID,
  };
   if (!repeat.value) {
    return;
  }
  repeat.value = false;
  toPublish('driver/delBank', payload, (obj: any) => {
    const { code, msg } = obj;
    if (code === 1) {
      repeat.value = true
      successHandler(msg);
    } else {
      repeat.value = true
      errorToast(msg);
    }
  });
}

function validate() {
  if (person.value === '') {
    showToast('请填写持卡人');
    return false;
  } else if (person.value !== realname.value) {
    showToast('持卡人应与您的姓名一致');
    return false;
  } else if (bankName.value === '') {
    showToast('请填写银行名称');
    return false;
  } else if (![16, 19].includes(cardNum.value.length)) {
    showToast('银行卡号应为16或19位');
    return false;
  } else {
    return true;
  }
}

function confirm() {
  closeConfirm();
  if (curType.value === 'info') {
    emit('close');
  } else if (validate()) {
    updateBank();
  }
}

function updateBank() {
  showLoading('正在提交');
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  const payload = {
    driver_id,
    type: 'bank',
    real_name: person.value,
    bank_name: bankName.value,
    bank_info: bank.value,
    card_no: cardNum.value,
  };
  toPublish('driver/editBank', payload, (obj: any) => {
    const { code, msg } = obj;
    if (code === 1) {
      repeat.value = true
      successHandler(msg);
    } else {
      repeat.value = true
      errorToast(msg);
    }
  });
}

function successHandler(msg: string) {
  successToast(msg);
  financeStore.getBankInfo();
  emit('close');
}
</script>

<style scoped lang="less">
.box {
  background-color: #fff;
  padding: 0 30rpx;
  border-top-left-radius: 14rpx;
  border-top-right-radius: 14rpx;
}

.unbind-btn {
  right: 0;
  width: 112rpx;
  padding: 8rpx 0;
  box-sizing: border-box;
  border: 2rpx solid #1b91ff;
  border-radius: 5px;
  color: #2295ff;
  font-size: 26rpx;
  text-align: center;
  letter-spacing: 4rpx;
}

.lbl {
  font-size: 32rpx;
}

.row {
  height: 100rpx;
  border-bottom: 2rpx solid #f2f2f2;
  letter-spacing: 2rpx;
  color: #333;
}

.row-grid {
  padding: 0 30rpx;
  display: grid;
  grid-template-columns: 150rpx 460rpx;
  column-gap: 50rpx;
  align-items: center;
}

.row-info {
  padding: 0 30rpx;
}

.mask-box {
  position: absolute;
  width: 100%;
  height: 0;
  bottom: 0;

  .inner-mask {
    width: 100%;
    height: 100vh;
    transform: translateY(-100vh);
  }
}
</style>
